<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{dreamer-cms:category field="typenamecn" /} - {dreamer-cms:global name="title"/}</title>
<meta name="Keywords" content="{dreamer-cms:global name="keywords"/}" />
<meta name="Description" content="{dreamer-cms:global name="describe"/}" />
    <meta name="360-site-verification" content="9f9ec5ece1b478c27b744707dc37e3dc" />
    <meta name="shenma-site-verification" content="2224cd4c8bd5a2f774ac1043307a4217_1713594248">
    <meta name="google-site-verification" content="LzRVDw7UvGJvGZg4oXDa-s51-Dbn0BXvlTVTH46GQ5k">
<link rel="stylesheet" href="{dreamer-cms:template /}css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="{dreamer-cms:template /}css/tools.css" type="text/css" media="all" />
<link rel="stylesheet" href="{dreamer-cms:template /}css/genericons.css" type="text/css" media="all" />
<link rel="stylesheet" href="{dreamer-cms:template /}css/responsive.css" type="text/css" media="all" />
<link rel="stylesheet" href="{dreamer-cms:template /}tools/iconfont.css" type="text/css" media="all" />
<script type="text/javascript" src="{dreamer-cms:template /}js/jquery.min.js"></script>
<script type="text/javascript" src="{dreamer-cms:template /}js/jquery-migrate.min.js"></script>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?b476db4218374e1bd018f005b4d8d163";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>

<body class="home blog wp-custom-logo hfeed">
<div class="site-content container clear">
    <div class="container">
		{dreamer-cms:include file='header2.html' /}
	</div>
    <div class="main">
    	<h1 class="location">
        	<i class="fa fa-wrench"></i>
            <a href="/" title="{dreamer-cms:global name="title"/}">首页</a> / 工具 / {dreamer-cms:category field="typenamecn" /}
        </h1>
    	<div id="primary" class="content-area">
        	<div class="codeEditor">
            	<!--代码输入框（注意请务必设置高度，否则无法显示）-->
                <pre id="codeEditor" class="ace_editor" style="min-height:300px">
                	<textarea class="ace_text-input"></textarea>
                </pre>
            </div>
            <div class="btn-groups">
            	<a href="javascript:void(0)" class="btn-format" onClick="formatContent();">校验/格式化</a>
                <a href="javascript:void(0)" class="btn-copy" onClick="copyContent();">复制结果</a>
                <a href="javascript:void(0)" class="btn-clear" onClick="clearContent();">清空</a>
                <div class="clear"></div>
            </div>
			<div class="codeResult">
            	<!--代码输入框（注意请务必设置高度，否则无法显示）-->
                <pre id="codeResult" class="ace_editor" style="min-height:300px">
                	<textarea class="ace_text-input"></textarea>
                </pre>
            </div>
        	<div class="tools">
            	{dreamer-cms:categoryartlist typeid="03n80lid" length="10"}
                <h1 class="location">
                    <i class="fa fa-wrench"></i>
                    <a href="[field:typeurl/]" title="[field:typenamecn /]">[field:typenamecn /]</a>
                </h1>
                {dreamer-cms:channel}
                <a href="[field:typeurl /]" title="[field:typenamecn /]">
                <div class="tool">
                    <div class="tool-header">
                        <div class="tool-icon"><i class="[field:ext01 /]"></i></div>
                        <div class="tool-title">[field:typenamecn /]</div>
                        <div class="clear"></div>
                    </div>
                    <div class="tool-bottom">[field:description /]</div>	
                </div>
                </a>
                {/dreamer-cms:channel}
                <div class="clear"></div>
                {/dreamer-cms:categoryartlist}
            </div>
        </div>
        
        {dreamer-cms:include file='right.html' /}
        
        <div class="clear"></div>
    </div>
    
    <div class="container">
		{dreamer-cms:include file='footer.html' /}
	</div>
</div>


<script type="text/javascript" src="{dreamer-cms:template /}js/superfish.js"></script> 
<script type="text/javascript" src="{dreamer-cms:template /}js/jquery.slicknav.js"></script> 
<script type="text/javascript" src="{dreamer-cms:template /}js/modernizr.js"></script> 
<script type="text/javascript" src="{dreamer-cms:template /}js/html5.js"></script> 
<script type="text/javascript" src="{dreamer-cms:template /}js/jquery.bxslider.js"></script> 
<script type="text/javascript" src="{dreamer-cms:template /}js/theia-sticky-sidebar.min.js"></script> 
<script type="text/javascript" src="{dreamer-cms:template /}js/jquery.custom.js"></script> 
<script type="text/javascript" src="{dreamer-cms:template /}js/wp-embed.min.js"></script>
<script type="text/javascript" src="{dreamer-cms:template /}js/dropmenu.js"></script>
<!--导入js库-->
<script src="{dreamer-cms:template /}js/aceeditor/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="{dreamer-cms:template /}js/aceeditor/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script src="{dreamer-cms:template /}js/clipboard.min.js" type="text/javascript" charset="utf-8"></script>
<script src="{dreamer-cms:template /}tools/jsbeautify.js" type="text/javascript" charset="utf-8"></script>
<script>
	//初始化对象
	var editor = ace.edit("codeEditor");
	//设置风格和语言（更多风格和语言，请到github上相应目录查看）
	theme = "monokai";
	language = "javascript";
	editor.setTheme("ace/theme/" + theme);
	editor.setValue("");
	editor.session.setMode("ace/mode/" + language);
	//字体大小
	editor.setFontSize(16);
	//设置只读（true时只读，用于展示代码）
	editor.setReadOnly(false);
	//自动换行,设置为off关闭
	editor.setOption("wrap", "free");
	//启用提示菜单
	ace.require("ace/ext/language_tools");
	editor.setOptions({
		enableBasicAutocompletion: true,
		enableSnippets: true,
		enableLiveAutocompletion: true
	});
	
	//初始化对象
	var resultEditor = ace.edit("codeResult");
	//设置风格和语言（更多风格和语言，请到github上相应目录查看）
	resultEditor.setTheme("ace/theme/" + theme);
	resultEditor.setValue("");
	resultEditor.session.setMode("ace/mode/" + language);
	//字体大小
	resultEditor.setFontSize(16);
	//设置只读（true时只读，用于展示代码）
	resultEditor.setReadOnly(true);
	//自动换行,设置为off关闭
	resultEditor.setOption("wrap", "free");
	//启用提示菜单
	ace.require("ace/ext/language_tools");
	resultEditor.setOptions({
		enableBasicAutocompletion: true,
		enableSnippets: true,
		enableLiveAutocompletion: true
	});
	
	//格式化
	function formatContent(){
		var content = editor.getValue();
		var tabsize = 4;
		var tabchar = " ";
		var fjs = js_beautify(content, tabsize, tabchar);
		resultEditor.setValue(fjs);
	}
	
	//复制内容
	function copyContent(){
		var content = resultEditor.getValue();
		var clipboard = new Clipboard('.btn-copy',{
			text: function() {
				return content;
			}					  
		});
		clipboard.on('success', function(e) {
			alert("复制成功");
		});
	
		clipboard.on('error', function(e) {
			console.log(e);
		});
	}
	
	//清空内容
	function clearContent(){
		editor.setValue("");
		resultEditor.setValue("");
	}
</script>
<div id="back-top"><a href="#top" title="返回顶部"><span class="genericon genericon-collapse"></span></a> </div>
</body>
</html>